<template>
  <div class="mainDiv">
    <Scroll height='960' :on-reach-bottom='onReachBottom'>
      <Card class="vCard" v-for="(tNew,index) in news" :key="index">
        <h1>{{ tNew.desc }}</h1>
        <b>{{ tNew.who }}</b>
      </Card>
    </Scroll>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        news: [],
        page: 1
      }
    },
    created: function () {
      this.$Loading.start()
      this.$http.get(`http://gank.io/api/data/Android/15/${this.page}`).then(data => {
        this.news = data.body.results
        this.$Loading.finish()
        this.page++
      })
    },
    methods: {
      onReachBottom: function (e) {
        this.$Loading.start()
        this.$http.get(`http://gank.io/api/data/Android/15/${this.page}`).then(data => {
          this.news = this.news.concat(data.body.results);
          this.$Loading.finish()
          this.page++
        })
      }
    }
  }
</script>
<style>
  .vCard:hover {
    background-color: rgb(174, 170, 164)
  }
</style>


